<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Progress Bar examples -  - Going in all directions</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">


<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>
<style type="text/css">
#ttb .yui-pb, #btt .yui-pb {
	width:20px;
	height:200px;
}

#ltr,#rtl, #ttb, #btt {
	margin:1em;
	border:thin solid silver;
	padding:1em;
}
.yui-pb-caption {
	visibility:visible;
}

.yui-skin-sam .yui-pb-ltr .yui-pb-anim, .yui-skin-sam  .yui-pb-rtl .yui-pb-anim {
	background-image: url(hgradient.png);
}

.yui-skin-sam .yui-pb-ttb .yui-pb-anim, .yui-skin-sam  .yui-pb-btt .yui-pb-anim {
	background-image: url(vgradient.png);
}

.left {
	float:left;
}

.dp-highlighter th, .dp-highlighter td {
	border:0;
	padding:0;
}
.dp-highlighter .line1, .dp-highlighter  .line2 {
	padding-left:10px;
	white-space:nowrap;
}
</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar examples - Going in all directions</h1>
			<p>An assortment of ProgressBars, each going in a different direction, all accelerated.</p>
		</div>
		<div id="bd">
			<div class="left">
				<div id="ltr"></div>
				<div id="rtl"></div>
			</div>
			<div class="left" id="ttb"></div>
			<div class="left" id="btt"></div>
		</div>
		<div id="ft">
			<p>The four bars above were created with the following code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var dirs = ['ltr','rtl','ttb','btt'], pb = [], i;
				
				for (i = 0 ; i < dirs.length; i++) {
					pb[i] = new YAHOO.widget.ProgressBar({direction:dirs[i],value:0, anim:true, animAcceleration: 0.3}).render(dirs[i]);
					pb[i].get('anim').duration = 3;
				}
			</textarea>
			<p>They are rendered into <em>divs</em> with their ids  set to the direction of the bar each will contain.  
			The movement of the bars is produced by the following code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var move = function() {
					for (var i = 0; i < pb.length; i++) {
						pb[i].set('value',100 - pb[i].get('value'));
					}
				};
				move();
				window.setInterval(move, 4000);
			</textarea>
			<p>None of this code deals with switching the background from a rippling one when it is moving to a solid one when is at rest.
			The ProgressBar adds a <code>.yui-pb-anim</code> class name to the bar when it is being animated, which helps us switch the background:</p>
			<textarea name="code" class="CSS" cols="60" rows="1">
			.yui-skin-sam .yui-pb-ltr .yui-pb-anim, 
			.yui-skin-sam .yui-pb-rtl .yui-pb-anim {
				background-image: url(hgradient.png);
			}

			.yui-skin-sam .yui-pb-ttb .yui-pb-anim, 
			.yui-skin-sam .yui-pb-btt .yui-pb-anim {
				background-image: url(vgradient.png);
			}
			</textarea>
			<p>The ProgressBar also adds a class name signaling the direction the bar will move, which allows us to use a background
			with the ripples going in the right direction.  These background images are not animated by themselves, they are not animated GIFs or such, 
			the ProgressBar	offsets those images by using the <code>background-position</code> CSS attribute, which lets us control speed and direction,
			and lets them repeat.  These are the background images used:</p>
			<div style="border:thin solid silver;float:left;padding:0.5em"><img style="border:thin solid silver" src="hgradient.png" /> hgradient.png</div>
			<div style="border:thin solid silver;float:left;padding:0.5em"><img style="border:thin solid silver" src="vgradient.png" /> vgradient.png</div>
		</div>
	</div>
	<script  type="text/javascript">


	YAHOO.util.Event.onDOMReady( function () {
		var dirs = ['ltr','rtl','ttb','btt'], pb = [], i;
		
		for (i = 0 ; i < dirs.length; i++) {
			pb[i] = new YAHOO.widget.ProgressBar({direction:dirs[i],value:0, anim:true, animAcceleration: 0.3}).render(dirs[i]);
			pb[i].get('anim').duration = 3;
		}

		var move = function() {
			for (var i = 0; i < pb.length; i++) {
				pb[i].set('value',100 - pb[i].get('value'));
			}
		};
		move();
		window.setInterval(move, 4000);
		
	});
</script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" language="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>
